

const {CleanWebpackPlugin}=require('clean-webpack-plugin');
const MiniCssPlugin=require('mini-css-extract-plugin');

const TerserPlugin=require('terser-webpack-plugin');

const HTmlWebpakPlugin=require('html-webpack-plugin');

var htmlConfig=function(name){
    return {
    template :'./src/view/'+name+'.html',
    filename :'view/'+name+'.html',
    inject:true,
    hash : true,
    chunks :['common',name],
    minify :{
      collapseWhitespace:false
    }
  }
}

const path = require('path');


var config= {
  entry: {
      'common':['./src/page/common/index.js'],
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module :{
      rules :[
          {
              test:/\.css$/ ,use:  [ 
                  {
                      loader: MiniCssPlugin.loader,
                      options:{
                          publicPath:'../'
                      }
                  }
                ,'css-loader' ]
          },
          {
            test :/.(png|svg|jpg|gif)$/,use:[
              {
                loader: 'url-loader',
                options:{
                  limit :1024,
                  name:'images/[name].[ext]',
                  esModule:false
                }
              }
              ],
              type :'javascript/auto'
          }
      ]
  },
  plugins:[
      new CleanWebpackPlugin(),
      new MiniCssPlugin({
          filename :'css/[name].css',
      }),
      new HTmlWebpakPlugin(htmlConfig('register')),
      
  ],
  optimization: {
    minimize: false,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
    ],
    splitChunks:{
        cacheGroups:{
            common:{
                // name: 'util'
                name : 'common' , 
                chunks: 'all',
                minChunks: 2,
                minSize:0

            }
        }
    }
  }

};
module.exports=config;